
<template>
  <div class="risk-content">
    <eagle-tab-page-list
      url="/ExExam/GetPageData"
      :params="params"
      @initActive="_initActive"
      @initList="_initList"
    >
      <template v-if="this.active === 0">
        <div class="plan-list">
              <div
                class="plan-detail mb-10"
                v-for="(item, index) in list"
                :key="index"
                @click="_goDetail(item)"
              >
                <div class="plan-detail-hd mb-10">
                  <img
                    src="@/assets/Images/AppIcon/icon_exam_icon_2.png"
                    alt=""
                  />
                  <div class="mt-5">
                    <div class="plan-detail-title mb-10">
                      {{ item.ExamName }}
                    </div>
                    <div class="plan-detail-describe">
                      {{ item.Introduce || "没有添加任何描述" }}
                    </div>
                  </div>
                </div>
                <div class="exam-time">
                  考试时间：{{ item.ExamStartTime }} 至 {{ item.ExamEndTime }}
                </div>

                <div class="plan-detail-bd mt-10">
                  <div>安排人：{{ item.PublishUserChnName }}</div>
                  <div>总题数：{{ item.TotalQuestions }}</div>
                  <span>考试时长：{{ item.ExamMins }} 分钟</span>
                </div>
              </div>
            </div>
      </template>
      <template v-else-if="this.active === 1">
        <div class="plan-list">
              <div
                class="plan-detail mb-10"
                v-for="(item, index) in list"
                :key="index"
                @click="_goDetail(item)"
              >
                <div class="plan-detail-hd mb-10">
                  <img
                    src="@/assets/Images/AppIcon/icon_exam_icon_2.png"
                    alt=""
                  />
                  <div class="mt-5">
                    <div class="plan-detail-title mb-10">
                      {{ item.ExamName }}
                    </div>
                    <div class="plan-detail-describe">
                      {{ item.Introduce || "没有添加任何描述" }}
                    </div>
                  </div>
                </div>
                <div class="exam-time">
                  考试时间：{{ item.ExamStartTime }} 至 {{ item.ExamEndTime }}
                </div>

                <div class="plan-detail-bd mt-10">
                  <div>安排人：{{ item.PublishUserChnName }}</div>
                  <div>总题数：{{ item.TotalQuestions }}</div>
                  <span>考试时长：{{ item.ExamMins }} 分钟</span>
                </div>
                <eagle-tag color="#999" class="tags">未开始</eagle-tag>
              </div>
            </div>
      </template>
      <template v-else>
        <div class="plan-list">
              <div
                class="plan-detail mb-10"
                v-for="(item, index) in list"
                :key="index"
                @click="_goExamResult(item)"
              >
                <div class="plan-detail-hd mb-10">
                  <img
                    src="@/assets/Images/AppIcon/icon_exam_icon_2.png"
                    alt=""
                  />
                  <div class="mt-5">
                    <div class="plan-detail-title mb-10">
                      {{ item.ExamName }}
                    </div>
                    <div class="plan-detail-describe">
                      {{ item.Introduce || "没有添加任何描述" }}
                    </div>
                  </div>
                </div>
                <!-- <div class="exam-time">
									考试时间：{{ item.ExamStartTime }} 至 {{ item.ExamEndTime }}
								</div> -->

                <div class="plan-detail-bd mt-10">
                  <div>交卷时间：{{ item.EndTime }}</div>
                </div>
                <eagle-tag
                  type="warning"
                  v-if="item.Status == 30 && item.IsPass == 0"
                  class="tags"
                  >未通过</eagle-tag
                >
                <eagle-tag
                  type="success"
                  v-if="item.Status == 30 && item.IsPass == 1"
                  class="tags"
                  >已通过</eagle-tag
                >
                <eagle-tag type="primary" v-if="item.Status == 20" class="tags"
                  >批阅中</eagle-tag
                >
              </div>
            </div>
      </template>
    </eagle-tab-page-list>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import store from "@/store/index";
export default {
  data() {
    return {
      active: 0,
      list: [],
      params: [
        {
          title: "未完成考试",
          dataType: "UnFinish",
          badge: false,
        },
        {
          title: "未开始考试",
          dataType: "NotStart",
          badge: false,
        },
        {
          title: "已完成考试",
          dataType: "Finished",
          badge: false,
        },
      ],
      CurrentProgress: 60,
    };
  },
  created() {
    let examResultID = localStorage.getItem('examResultID');
    if (examResultID) {
      this.$router.push("/Train/ExamResult?id=" + examResultID);
      localStorage.removeItem("examResultID")
      return;
    }
  },
  methods: {
    _initActive(active) {
      this.active = active;
    },
    _initList(list) {
      this.list = list;
    },
    // 详情
    _goDetail(item) {
      this.$router.push("/Train/ExExamExplain?id=" + item.ID);
    },
    // 考试结果
    _goExamResult(item) {
      this.$router.push("/Train/ExamResult?id=" + item.ExamUserPaperID);
    },
  },
};
</script>

<style lang="less" scoped>
.risk-content {
  background-color: #e8f1f8;
  min-height: 100vh;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}

.plan-detail {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  color: #333;
  font-size: 10px;
  position: relative;
  .plan-detail-tag {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.plan-detail-hd {
  display: flex;
  img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 50%;
  }
  .plan-detail-title {
    font-size: 14px;
    color: #000;
  }
  span {
    color: #666;
  }
}
.exam-time {
  height: 28px;
  line-height: 28px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.plan-detail-describe {
  width: 200px;
  line-height: 1.2;
  // word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
  word-break: break-all;
}
.plan-detail-bd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tags {
  position: absolute;
  top: 0px;
  right: 0;
  border-radius: 0 5px 0 5px;
}

.plan-list{
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>